<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <span>联合体信息</span>
          <div class="form-left-right">
            <el-form
              style="max-width: 1200px"
              :model="state.form"
              :rules="rules"
              label-position="top"
              ref="formRef"
            >
              <el-form-item label="联合体名称：" prop="lianhetimingcheng">
                <el-input size="large" v-model="state.form.lianhetimingcheng" />
              </el-form-item>
              <el-form-item label="类型：" prop="leixing1">
                <el-select
                  v-model="state.form.leixing1"
                  size="large"
                  @change="changeSelection1"
                  placeholder=""
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in state.type1"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="state.form.leixing2"
                  class="ml10"
                  size="large"
                  @visible-change="GetType2"
                  :loading="loading2"
                  placeholder=""
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in state.type2"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="联合体主理人：" prop="zhuliren">
                <el-input size="large" v-model="state.form.zhuliren" />
              </el-form-item>
              <el-form-item label="项目介绍：" prop="xiangmujieshao">
                <el-input
                  type="textarea"
                  maxlength="500"
                  rows="5"
                  size="large"
                  v-model="state.form.xiangmujieshao"
                />
              </el-form-item>
              <el-form-item
                label="联合体介绍（视频/图片-建议尺寸:750*560px）"
                prop="lianhetijieshao"
              >
                <bjz-oss
                  :previewList="state.form.lianhetijieshao"
                  :accept="['.jpg', '.png', '.jpeg', '.mp4']"
                  :allowMultiple="true"
                  :size="100"
                  @success="success"
                  @remove="remove"
                />
              </el-form-item>
              <el-form-item label="发布联合体公司：" prop="fabugongsi">
                <el-select
                  v-model="state.form.fabugongsi"
                  size="large"
                  placeholder=""
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in state.companies"
                    :key="item.gysNo"
                    :label="item.gongsimingcheng"
                    :value="item.gysNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="参与联合体公司：" prop="canyugongsi">
                <el-select
                  v-model="state.form.canyugongsi"
                  multiple
                  size="large"
                  placeholder=""
                  style="width: 240px"
                >
                  <el-option
                    v-for="item in state.companies"
                    :key="item.gysNo"
                    :label="item.gongsimingcheng"
                    :value="item.gysNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="备注：" prop="beizhu">
                <el-input
                  type="textarea"
                  maxlength="500"
                  rows="5"
                  size="large"
                  v-model="state.form.beizhu"
                />
              </el-form-item>
              <el-form-item
                class="vue-editor"
                label="联合体："
                prop="lianhetigaikuang"
              >
                <editor
                  :initValue="state.form.lianhetigaikuang"
                  @onVal="onVal"
                />
              </el-form-item>
              <el-form-item v-if="state.check === '1'" label="审核：">
                <el-radio-group v-model="state.form.shenhe">
                  <el-radio :label="0">待审核</el-radio>
                  <el-radio :label="1">审核通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="button-group">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交</el-button
                >
                <el-button
                  type="primary"
                  style="margin-left: 50px"
                  @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDictionaryTree, GetDictionary } from "@/api/system";
import { baseMsg } from "@/utils/utils";
import { AddConsortium, EditConsortium, GetConsortium } from "@/api/consortium";
import { GetProviderOptions } from "@/api/provider";
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const validateImg = (rule, value, callback) => {
  if (state.form.lianhetijieshao && state.form.lianhetijieshao.length) {
    callback();
  } else {
    callback(new Error("请上传图片/视频"));
  }
};
const rules = {
  lianhetimingcheng: [
    {
      required: true,
      message: "请输入联合体名称",
      trigger: "blur",
    },
  ],
  leixing1: [
    {
      required: true,
      message: "请选择类型",
      trigger: "change",
    },
  ],
  zhuliren: [
    {
      required: true,
      message: "请输入联合体主理人",
      trigger: "blur",
    },
  ],
  xiangmujieshao: [
    {
      required: true,
      message: "请输入项目介绍",
      trigger: "blur",
    },
  ],
  lianhetijieshao: [
    {
      required: true,
      trigger: "blur",
      validator: validateImg,
    },
  ],
  fabugongsi: [
    {
      required: true,
      message: "请输入发布联合体公司",
      trigger: "blur",
    },
  ],
  canyugongsi: [
    {
      required: true,
      message: "请输入参与联合体公司",
      trigger: "blur",
    },
  ],
  lianhetigaikuang: [
    {
      required: true,
      message: "请输入联合体概况",
      trigger: "blur",
    },
  ],
};
const state = reactive({
  form: {
    lianhetimingcheng: "",
    leixing1: "",
    leixing2: "",
    zhuliren: "",
    xiangmujieshao: "",
    lianhetijieshao: [],
    fabugongsi: "",
    canyugongsi: [],
    beizhu: "",
    lianhetigaikuang: "",
    shenhe: 0,
  },
  // 类型下拉
  type1: [],
  type2: [],
  loading2: true,
  companies: [],
  check: localStorage.getItem("check"),
});
// 根据id查询内容
const GetInfo = () => {
  if (route.query.type == "edit") {
    GetConsortium({ id: route.query.id }).then((res) => {
      if (res.code === 4201) {
        state.form = res.data;
        GetType2();
      }
    });
  }
};
// 类型下拉查询
const GetType = async () => {
  const res = await GetDictionaryTree({ dicModel: "lianhetileixing" });
  if (res.code == 4201) {
    state.type1 = res.data;
  }
};
// 发布/参与联合体公司查询
const GetCompanies = () => {
  GetProviderOptions().then((res) => {
    if (res.code == 4201) {
      state.companies = res.data;
    }
  });
};
// 分类1选中值改变
const changeSelection1 = () => {
  state.type2 = [];
  state.form.leixing2 = "";
};
// 查询二级分类
const GetType2 = (val) => {
  state.loading2 = true;
  state.type2 = [];
  if (state.form.leixing1) {
    GetDictionary({ dicId: state.form.leixing1 }).then((res) => {
      if (res.code == 4201) {
        state.type2 = res.data;
      }
    });
    state.loading2 = false;
  } else {
    state.loading2 = false;
  }
};
// 文件上传
const success = (res) => {
  state.form.lianhetijieshao.push(res);
};
// 上传文件删除
const remove = (index) => {
  state.form.lianhetijieshao.splice(index, 1);
};
// 富文本编辑器
const onVal = (val) => {
  state.form.lianhetigaikuang = val;
};
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (route.query.type == "add") {
        AddConsortium(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("新增联合体成功");
            router.go(-1);
          }
        });
      }
      if (route.query.type == "edit") {
        EditConsortium(state.form).then((res) => {
          if (res.code == 4202) {
            baseMsg("编辑联合体成功");
            router.go(-1);
          }
        });
      }
    }
  });
};
GetType();
GetInfo();
GetCompanies();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
  flex: 1;
  span {
    white-space: nowrap;
  }
  .form-left-right {
    margin-top: 80px;
    margin-left: 60px;
    width: 100%;
  }
}
</style>
